if (!window.anthill.layout) anthill.layout = {};

anthill.layout.RPane = function (container, callback) {
	this.container = container;
	this.callback = callback;
};

anthill.layout.RPane.prototype.draw = function (options) {
	/*
	  options.panes = {h: [{v:[2]},1]}
	<div id='container'>
	  <div id='container_tp' class='anthill_tpane'>
		<div id='container_0' class='anthill_hpane'>
			<div id='container_0_0' class='anthill_vpane'/>
			<v>
			<div id='container_0_1' class='anthill_vpane'/>
		</div>
		<h>
		<div id='container_1' class='anthill_hpane'/>
	  </div>
	</div>
	*/
	this.style = '';
	this.options = (options)?options:{};
	if(this.options.color) {
		this.style += 'background-color: '+this.options.color;
	}
	var html = document.createElement('div');
	html.setAttribute('class', 'anthill_tpane');
	html.setAttribute('id', this.container.id+'_tp');
	this.container.innerHTML = '';
	this.container.appendChild(html);
	/*html.clientWidth = this.container.clientWidth;
	html.clientHeight = this.container.clientHeight;*/
	this.loaded = {};
	if(this.options.panes) {
		this.addChildPanes(this.options.panes, html,this.container.id);
	}// else {
		this.callback();
	//}
};

anthill.layout.RPane.prototype.addChildPanes = function(pane, html,id) {
	this.loaded[id] = false;
	var count = 0;
	var cpane = [];
	if (pane.v) {
		cpane = pane.v;
		var divclass = 'anthill_vpane';
		var sepclass = 'anthill_vsep';
		
	}
	if (pane.h) {
		cpane = pane.h;
		var divclass = 'anthill_hpane';
		var sepclass = 'anthill_hsep';
	}
	var childCount = 0;
	var divCount = 0;
	var ch = html.clientHeight;
	var cw = html.clientWidth;
	var style = this.style;
	for (var i = 0; i<cpane.length; i++) {
		if (typeof cpane[i] == 'number') {
			childCount += cpane[i];
			divCount += cpane[i];
		} else {
			if(divclass == 'anthill_vpane' && cpane[i].wh) {
				if(cpane[i].wh.match(/\d+%$/)) {
					cw -= parseInt(cpane[i].wh)*html.clientWidth/100;
				} else {
					cw -= parseInt(cpane[i].wh);
				}
			} else if (divclass == 'anthill_hpane' && cpane[i].ht) {
				if(cpane[i].ht.match(/\d+%$/)) {
					ch -= parseInt(cpane[i].ht)*html.clientHeight/100;
				} else {
					ch -= parseInt(cpane[i].ht);
				}
			} else {
				divCount += 1;
			}
			childCount += 1;
		}
	}
	var ah = 0;
	var aw = 0;
	var ht = (ch-(5*(childCount-1)))/divCount;
	var wh = (cw-(5*(childCount-1)))/divCount;
	for (var i = 0; i<cpane.length; i++) {
		if (typeof cpane[i] == 'number') {
			var loops = cpane[i];
		} else {
			var loops = 1;
		}
		for (var j = 0; j<loops; j++) {
			var d = document.createElement('div');
			d.setAttribute('class', divclass);
			d.setAttribute('id', id+'_'+count);
			if(divclass == 'anthill_hpane') {
				if(cpane[i].ht) {
					if (cpane[i].ht.match(/\d+%$/)) {
						var he = parseInt(cpane[i].ht)*html.clientHeight/100;
					} else {
						var he = parseInt(cpane[i].ht);
					}
				} else {
					var he = ht;
				}
				var dt = (ah/html.clientHeight)*100;
				ah += he;
				d.setAttribute('style', 'top:'+dt+'%; height:'+he+'px;');
			} else if (divclass == 'anthill_vpane'){
				if(cpane[i].wh) {
					if (cpane[i].wh.match(/\d+%$/)) {
						var wi = parseInt(cpane[i].wh)*html.clientWidth/100;
					} else {
						var wi = parseInt(cpane[i].wh);
					}
				} else {
					var wi = wh;
				}
				var dl = (aw/html.clientWidth)*100;
				aw += wi;
				d.setAttribute('style', 'left:'+dl+'%; width:'+wi+'px;');
			}
			html.appendChild(d);
			if (typeof cpane[i] == 'object') {
				if(cpane[i].t) {
					d.innerHTML = cpane[i].t;
				} else {
					this.addChildPanes(cpane[i], d, id+'_'+count);
				}
			}
			if (j != loops-1 || i != cpane.length-1) {
				d = document.createElement('div');
				d.setAttribute('class', sepclass);
				if(this.options.ctrl !== false) {
					var ctrl = document.createElement('div');
					ctrl.setAttribute('class', 'anthill_sep_ctrl');
					d.appendChild(ctrl);
				}
				if(sepclass == 'anthill_hsep') {
					var st = (ah/html.clientHeight)*100;
					ah += 5;
					d.setAttribute('style', 'top:'+st+'%; height: 5px;'+this.style);
					if(ctrl) {
						
					}
				} else {
					var sl = (aw/html.clientWidth)*100;
					aw += 5;
					d.setAttribute('style', 'left:'+sl+'%; width: 5px;'+this.style);
				}
				d.addEventListener('mousedown', function(event) {
					event.stopPropagation();

					var clX = event.clientX;
					var clY = event.clientY;
					var tgt = this;
					this.parentNode.onmousemove = function(event) {
						if(tgt.getAttribute('class') == 'anthill_hsep') {
							var diff = (event.clientY-clY);
							var pheight = parseInt(tgt.previousSibling.style.height) + diff;
							var nheight = parseInt(tgt.nextSibling.style.height) - diff;
							if (pheight <= 5 || nheight <= 5) {
								return null;
							}
							var top = ((tgt.offsetTop + diff)/this.clientHeight)*100;
							tgt.setAttribute("style", "top: "+top+"%; height: 5px;"+style);
							tgt.previousSibling.setAttribute("style", "top: "+tgt.previousSibling.style.top+"; height: "+pheight+"px;");
							top = ((tgt.nextSibling.offsetTop + diff)/this.clientHeight)*100;
							tgt.nextSibling.setAttribute("style", "top: "+top+"%; height: "+nheight+"px;");
							clY = event.clientY;
						} else {
							var diff = (event.clientX-clX);
							var pwidth = parseInt(tgt.previousSibling.style.width) + diff;
							var nwidth = parseInt(tgt.nextSibling.style.width) - diff;
							if (pwidth <= 5 || nwidth <= 5) {
								return null;
							}
							var left = ((tgt.offsetLeft + diff)/this.clientWidth)*100;
							tgt.setAttribute("style", "left: "+left+"%; width: 5px;"+style);
							tgt.previousSibling.setAttribute("style", "left: "+tgt.previousSibling.style.left+"; width: "+pwidth+"px;");
							left = ((tgt.nextSibling.offsetLeft + diff)/this.clientWidth)*100;
							tgt.nextSibling.setAttribute("style", "left: "+left+"%; width: "+nwidth+"px;");
							clX = event.clientX;
						}
					};
					this.parentNode.onmouseup = function(event) {
						this.onmousemove=null;
      						this.onmouseup=null;
					};
				}, false);
				html.appendChild(d);
			}
			count++;
		}
	}
	//this.setLoaded(id);
};

anthill.layout.RPane.prototype.setLoaded = function(id) {
	this.loaded[id] = true;
	for (var i in this.loaded) {
		if(!this.loaded[i]) {
			return;
		}
	}
	this.callback();
};
/*
   function playVid(vidId) {
      if (vidPaneID.style.display=='block') {
         vidPaneID.style.display='none';
         vidPaneID.innerHTML=''; 
      } else {
         vidPaneID.style.display='block';
         vidPaneID.innerHTML='<A HREF="javascript:playVid()">CLOSE</A>';
         var vidstring ='<center><embed enableJavascript="false" allowScriptAccess="never"';
         vidstring+=' allownetworking="internal" type="application/x-shockwave-flash"';
         vidstring+='  src="http://www.youtube.com/v/'+vidId+'&autoplay=1" ';
         vidstring+=' wmode="transparent" height="350" width=425"></center>';
         vidPaneID.innerHTML+=vidstring;
      }
   }

   function moveHandler(e){
      if (e == null) { e = window.event } 
      if (e.button<=1&&dragOK){
         selObj.style.left=e.clientX-dragXoffset+'px';
         selObj.style.top=e.clientY-dragYoffset+'px';
         return false;
      }
   }

   function cleanup(e) {
      document.onmousemove=null;
      document.onmouseup=null;
      selObj.style.cursor=orgCursor;
      dragOK=false;
   }

   function dragHandler(e){
      var htype='-moz-grabbing';
      if (e == null) { e = window.event; htype='move';} 
      var target = e.target != null ? e.target : e.srcElement;
      selObj=target;
      orgCursor=target.style.cursor;
      if (target.className=="vidFrame"||target.className=="moveable") {
         target.style.cursor=htype;
         dragOK=true;
         dragXoffset=e.clientX-parseInt(selObj.style.left);
         dragYoffset=e.clientY-parseInt(selObj.style.top);
         document.onmousemove=moveHandler;
         document.onmouseup=cleanup;
         return false;
      }
   }
	 
	 document.onmousedown=dragHandler;
*/

/*
var ct = document.createElement('div');
var dv = document.createElement('div');
dv.style.backgroundColor = '#4F5D6F';
ct.style.width='30px';
dv.style.height='10px';

dr1= document.createElement('div');
dr1.setAttribute('class', 'r1 l1');
dr1.style.backgroundColor = '#4F5D6F';
dr2= document.createElement('div');
dr2.setAttribute('class', 'r2 l2');
dr2.style.backgroundColor = '#4F5D6F';
dr3= document.createElement('div');
dr3.setAttribute('class', 'r3 l3');
dr3.style.backgroundColor = '#4F5D6F';

di1 = document.createElement('div');
var im = document.createElement('img');
im.src = 'img/blarrow.png';
di1.setAttribute('style', 'float: left; padding: 2px');
di1.appendChild(im);
dv.appendChild(di1);

di2 = document.createElement('div');
var im2 = document.createElement('img');
im2.src = 'img/brarrow.png';
di2.setAttribute('style', 'float: right; padding: 2px');
di2.appendChild(im2);
dv.appendChild(di2);

ct.appendChild(dr1);
ct.appendChild(dr2);
ct.appendChild(dr3);
ct.appendChild(dv);
ct.appendChild(dr3.cloneNode(true));
ct.appendChild(dr2.cloneNode(true));
ct.appendChild(dr1.cloneNode(true));
document.body.appendChild(ct);
*/